<template>
  <ul class="find_list" ref="findListRef" v-loading="flag">
      1
    <!-- <li
      class="list_item"
      v-for="(item, index) in findList"
      :key="index"
      :ref="findListItemRef"
    >
      <img :src="item.url" alt="" />
      <h5>{{ item.type }}</h5>
    </li> -->
  </ul>
</template>

<script>
import {
  defineComponent,
  nextTick,
  onBeforeMount,
  onMounted,
  reactive,
  ref,
} from "vue";
import { getFindData } from "../api/pictures";
export default defineComponent({
  setup() {
    onMounted(() => {
    //   handleGetFind();
    });

    let flag = ref(false);

    let columnsHeightArr = [];

    let findList = ref(null);

    let findListRef = ref(null);

    // 存储dom数组
    const listItemArr = ref([]);

    let columns;

    // 动态获取间隔
    let grap;

    let findListItemRef = (el) => {
      listItemArr.value.push(el);
    };

    const handleGetFind = async () => {
      const { data: res } = await getFindData();
      if (res.code === 200) {
        findList.value = res.data;

        nextTick(() => {
          waterfallHandler();
          flag.value = false;
        });
      }
    };

    // 瀑布流处理
    const waterfallHandler = () => {

    };



    return {
      flag,
      findList,
      findListRef,
      findListItemRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.find_list {
  position: relative;
  margin-top: 20px;
}
.list_item {
  position: absolute;
  padding: 10px;
  width: 240px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 2px 2px 3px #cccccc;
  background-color: #ffffff;
  transition: all 0.3s ease;
  img {
    width: 100%;
  }

  h5 {
    font-size: 14px;
  }
}
</style>